<template>
    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
    <router-view></router-view>
</template>
  
<script lang="ts">
import { defineComponent, h, ref } from 'vue'
import type { MenuOption } from 'naive-ui'
import { RouterLink } from 'vue-router'

const menuOptions: MenuOption[] = [
{
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'json'
          }
        },
        { default: () => 'json格式化' }
      ),
    key: 'json',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'json'
          }
        },
        { default: () => '字符串长度' }
      ),
    key: 'qr',
  }
]

export default defineComponent({
    setup() {
        return {
            activeKey: ref<string | null>(null),
            menuOptions
        }
    }
})
</script>